<template>
  <el-card>
    <div class="table-container">
      <el-button @click="delete1">清除节点一数据</el-button>
      <el-button @click="delete2">清除节点二数据</el-button>
      <el-button @click="exportExcel('table1', '节点一.xlsx')">导出节点一数据</el-button>
      <el-button @click="exportExcel('table2', '节点二.xlsx')">导出节点二数据</el-button>
      <h1>节点一数据</h1>
      <el-table :data="tableData1" id="table1"
        style="width: 100%; max-height: calc(100vh - 180px); overflow-y: auto;margin-top: 20px;margin-bottom: 10px;">
        <el-table-column prop="time" label="时间" width="180px"></el-table-column>
        <el-table-column prop="node1Temp" label="节点1温度"></el-table-column>
        <el-table-column prop="node1Hum" label="节点1湿度"></el-table-column>
        <el-table-column prop="node1Smoke" label="节点1烟雾浓度"></el-table-column>
        <el-table-column prop="node1Battery" label="节点1电池电量"></el-table-column>
        <el-table-column prop="node1Alarm" label="节点1报警">
          <template v-slot="{ row }">
            <el-tag
              :type="isAlarm1(row.node1Temp) || isAlarm2(row.node1Hum) || isAlarm3(row.node1Smoke) || isAlarm4(row.node1Battery) ? 'danger' : 'success'">
              {{ isAlarm1(row.node1Temp) || isAlarm2(row.node1Hum) || isAlarm3(row.node1Smoke) ||
                isAlarm4(row.node1Battery) ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <h1>节点二数据</h1>
      <el-table :data="tableData2" id="table2"
        style="width: 100%; max-height: calc(100vh - 180px); overflow-y: auto;margin-top: 20px;margin-bottom: 10px;">
        <el-table-column prop="time" label="时间" width="180px"></el-table-column>
        <el-table-column prop="node2Temp" label="节点2温度"></el-table-column>
        <el-table-column prop="node2Hum" label="节点2湿度"></el-table-column>
        <el-table-column prop="node2Smoke" label="节点2烟雾浓度"></el-table-column>
        <el-table-column prop="node2Battery" label="节点2电池电量"></el-table-column>
        <el-table-column prop="node2Alarm" label="节点2报警">
          <template v-slot="{ row }">
            <el-tag
              :type="isAlarm1(row.node2Temp) || isAlarm2(row.node2Hum) || isAlarm3(row.node2Smoke) || isAlarm4(row.node2Battery) ? 'danger' : 'success'">
              {{ isAlarm1(row.node2Temp) || isAlarm2(row.node2Hum) || isAlarm3(row.node2Smoke) ||
                isAlarm4(row.node2Battery) ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import { reactive } from 'vue'
import { onMounted, ref } from 'vue'
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
  setup() {
    const tableData1 = reactive([])

    const tableData2 = reactive([])
    // 温度预警设置
    const isAlarm1 = (value) => {
      return parseFloat(value) > 30
    }
    // 湿度预警设置
    const isAlarm2 = (value) => {
      return parseFloat(value) > 85
    }
    // 烟雾浓度预警设置
    const isAlarm3 = (value) => {
      return parseFloat(value) > 200
    }
    // 电池电量预警设置
    const isAlarm4 = (value) => {
      return parseFloat(value) < 20
    }

    const nodeOneData = ref(null)
    const nodeTwoData = ref(null)

    function loadDataFromLocalStorage() {
      const nodeOneDataStr = localStorage.getItem('nodeOneData1')
      if (nodeOneDataStr) {
        nodeOneData.value = JSON.parse(nodeOneDataStr)
        console.log('节点111111数据', nodeOneData.value)

        // 阿里云time解析
        //const dateObj = new Date(parseFloat(nodeOneData.value[1].data[0].Time));
        for (let i = 0; i < nodeOneData.value.length; i++) {
          const dateObj = new Date(parseFloat(nodeOneData.value[1].data[0].Time));
          tableData1.push({
            time: dateObj,
            node1Temp: parseFloat(nodeOneData.value[i].data[0].Value).toFixed(2) + nodeOneData.value[i].data[0].Unit,
            node1Hum: parseFloat(nodeOneData.value[i].data[1].Value).toFixed(2) + nodeOneData.value[i].data[1].Unit,
            node1Smoke: parseFloat(nodeOneData.value[i].data[2].Value).toFixed(2) + nodeOneData.value[i].data[2].Unit,
            node1Battery: parseFloat(nodeOneData.value[i].data[3].Value).toFixed(2) + nodeOneData.value[i].data[3].Unit,
          });
        }
        console.log('tableDATA1', tableData1)
      }

      const nodeTwoDataStr = localStorage.getItem('nodeTwoData2')
      if (nodeTwoDataStr) {
        nodeTwoData.value = JSON.parse(nodeTwoDataStr)
        console.log('节点22222数据', nodeTwoData.value)
        console.log('2数据', nodeTwoData.value[0].data2)

        for (let i = 0; i < nodeTwoData.value.length; i++) {
          const dateObj = new Date(parseFloat(nodeTwoData.value[i].data2[0].Time));
          tableData2.push({
            time: dateObj,
            node2Temp: parseFloat(nodeTwoData.value[i].data2[0].Value).toFixed(2) + nodeTwoData.value[i].data2[0].Unit,
            node2Hum: parseFloat(nodeTwoData.value[i].data2[1].Value).toFixed(2) + nodeTwoData.value[i].data2[1].Unit,
            node2Smoke: parseFloat(nodeTwoData.value[i].data2[2].Value).toFixed(2) + nodeTwoData.value[i].data2[2].Unit,
            node2Battery: parseFloat(nodeTwoData.value[i].data2[3].Value).toFixed(2) + nodeTwoData.value[i].data2[3].Unit,
          });
        }
        console.log('tableData2', tableData2)
      }
    }
    function loadData() {
      loadDataFromLocalStorage();
      // 在这里添加其他的加载数据的逻辑
    }
    function delete1() {
      localStorage.removeItem('nodeOneData1');
    }
    function delete2() {
      localStorage.removeItem('nodeTwoData2');
    }


    function exportExcel(tabid, name) {
      const wb = XLSX.utils.table_to_book(document.querySelector('#' + tabid), {
        raw: true // 如果表格里有数字、日期这些、需要加上raw: true
      });
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      });
      try {
        FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象。
          new Blob([wbout], { type: 'application/octet-stream' }),
          // 设置导出文件名称
          name
        );
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
      }
      return wbout;
    }


    onMounted(() => {
      loadDataFromLocalStorage();
    });

    return {
      tableData1,
      tableData2,
      nodeOneData,
      nodeTwoData,
      isAlarm1,
      isAlarm2,
      isAlarm3,
      isAlarm4,
      loadData,
      delete1,
      delete2,
      exportExcel
    }
  }
}
</script>

<style scoped>.table-container {
  margin: 20px;
}</style>